<template>
	<div class="headNav">
		<van-nav-bar
			:z-index="zIndex"
			:title="title"
			:right-text="RText"
			:left-text="LText"
			:left-arrow="Larrow"
			@click-left="backPage"
			@click-right="rightClick"
			:class="bgColor"
		>
			<template #right>
				<van-icon v-if="iconName" :name="iconName" size="18" @click="rightIconClick" />
			</template>
		</van-nav-bar>
	</div>
</template>

<script>
export default {
	name: 'headNav',
	props: {
		title: {
			// 标题
			type: String,
			default: ''
		},
		RText: {
			// 右侧文字
			type: String,
			default: ''
		},
		LText: {
			// 左侧文字
			type: String,
			default: ''
		},
		Larrow: {
			// 是否展示左箭头
			type: Boolean,
			default: true
		},
		iconName: {
			// 右侧的 icon 只支持 vant 的图标 name
			type: String,
			default: ''
		},
		zIndex: {
			// z 轴层级
			type: Number,
			default: 1
		},
		bgColor: {
			// 背景颜色 只支持 white ｜ blue
			type: String,
			default: 'white'
		}
	},
	data() {
		return {
			key: ''
		};
	},
	methods: {
		init() {},

		// 后退
		backPage() {
			this.$emit('backPage');
		},

		// 默认点击右侧图标
		rightClick() {
			this.$emit('rightClick');
		},

		rightIconClick() {
			this.$emit('rightIconClick');
		}
	}
};
</script>

<style lang="scss">
.headNav {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;

	.van-nav-bar__title {
		font-size: 15px;
	}

	.van-nav-bar__right {
		.van-nav-bar__text {
			color: #0066ff;
		}
	}

	.van-nav-bar__left {
		.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
			color: #787878;
		}
	}

	.van-nav-bar__content {
		// border-bottom: 1px solid #b4b4b6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.van-nav-bar__text {
		font-size: 14px;
	}

	.van-icon {
		font-size: 20px !important;
		color: #0073ac;
	}

	.blue {
		.van-nav-bar__content {
			background-color: #0066ff;

			* {
				color: #fff !important;
			}
		}
	}
}
</style>
